<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>宣和艺网-共享艺术服务平台</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}"/>
    <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?d554d2fe469092ab25a4245851a644f0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>

<body>
<!--手机搜索begin-->
<div id="nav-search">

</div>
<div class="drawer-section search_div">
    <div class="search_con">
        <form action="" style="width: 100%;height: 100%;">
            <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
                   onBlur="if(value==''){value='搜索'}"/>
            <input type="submit" value="" class="bnt1"/>
        </form>
    </div>
</div>
<!--top-->
<div id="top">
    <div class="wrap clearfloat">
        <div th:replace="~{mobile/component/header :: index_menu}"></div>

        <div class="topPhone clearfloat">

        </div>
    </div>
    <div class="muen1" style="right: 56px;"><span class="muenX"></span> <span class="muenY">
        <img class="img1" th:src="@{/images/mobile/search_image.png}"/>
      </span> <span class="muenZ"></span></div>
    <div class="muen"><span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span></div>
</div>
<!--/top-->

<!--main-->
<div class="main">
    <div class="banner">
        <ul class="slider1">
            <li><a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}"/><img class="img2"
                                                                                             th:src="@{/images/mobile/banner_wap.png}"/></a>
            </li>
            <li><a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}"/><img class="img2"
                                                                                             th:src="@{/images/mobile/banner_wap.png}"/></a>
            </li>
            <li><a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}"/><img class="img2"
                                                                                             th:src="@{/images/mobile/banner_wap.png}"/></a>
            </li>
        </ul>
    </div>

    <script>
        $(document).ready(function () {
            // 给 class 为 packUp 的元素绑定点击事件
            $('#type-control').click(function () {
                // 切换 id 为 art-type-select 的元素的显示状态
                $('#art-type-select').toggle();
                // 根据显示状态修改按钮文本
                if ($('#art-type-select').is(':visible')) {
                    $(this).text(' 收起▲ ');
                } else {
                    $(this).text(' 展开▼ ');
                }
            });
        });

        $(document).ready(function () {
            // 给 class 为 packUp 的元素绑定点击事件
            $('#letter-control').click(function () {
                // 切换 id 为 art-type-select 的元素的显示状态
                $('#letter-type-select').toggle();
                // 根据显示状态修改按钮文本
                if ($('#letter-type-select').is(':visible')) {
                    $(this).text(' 收起▲ ');
                } else {
                    $(this).text(' 展开▼ ');
                }
            });
        });


    </script>
    <script>
        function updateScale() {
            // 获取屏幕宽度
            const screenWidth = window.innerWidth;
            // 计算缩放比例
            const scale = screenWidth / 1040;
            // 获取 id 为 page-content 的元素
            const pageContent = document.getElementById('page-content');
            // 如果元素存在，则应用缩放样式
            if (pageContent) {
                pageContent.style.transform = `scale(${scale})`;
            }

        }

        // 页面加载完成时调用更新缩放比例的函数
        window.addEventListener('load', updateScale);
        // 当窗口大小改变时也调用更新缩放比例的函数
        window.addEventListener('resize', updateScale);
    </script>
    <style>
        #page-content-2 img {
            width: 100% !important;
        }
    </style>

    <div class="about_bg3">

        <div style="clear: both;height: 0.5rem;">

        </div>
        <div class="encyclopedia-type">

        </div>
        <div class="product_ul anim anim-1 anim-show">
            <h1 style="font-size: 1.5rem" th:text="${article.name}"></h1>
            <h4 style="margin-top: 0.5rem;margin-bottom: 0.5rem;"> 发布时间：[[ ${article.createDate} ]]</h4>
            <div style="">
                <div style="text-align: left;" th:utext="${article.content}"></div>

            </div>

        </div>

    </div>

    <!--/main-->

    <!--footer-->
    <div th:replace="~{mobile/component/footer :: footer}"></div>
    <!--/footer-->

    <!--wap-->
    <div th:replace="~{mobile/component/footer :: footer_menu}"></div>
    <!--/wap-->

    <div class="wapBg"></div>
</body>
<script type="text/javascript">
    $('.slider1').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'speed': 1000,
        'pause': 4000,

    })

    $('.sliderHomeSpT').bxSlider({
        'auto': false,
        'controls': true,
        'touchEnabled': true,
        'pager': true,

    })

    var lineW = $(".lineW span").width();
    $('.sliderHomeSpB').bxSlider({
        'auto': false,
        infiniteLoop: true,
        'controls': true,
        'touchEnabled': true,
        'pager': true,
        'slideWidth': '204',
        'minSlides': 2,
        'maxSlides': 5,
        'moveSlides': 5,
        onSlideAfter: function ($slideElement, oldIndex, newIndex) {
            var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
            var lineWW = $(".lineW").width();


            if (newIndex == 0) {
                $(".lineW span").css({
                    "width": lineW + 'px'
                })
            } else {
                $(".lineW span").css({
                    "width": (lineWW / num) * (newIndex + 1) + 'px'
                })
            }

        },


    })

    $('.sliderHomeDzzc').bxSlider({
        'auto': true,
        'controls': true,
        'touchEnabled': true,
        'pager': false,
        'slideWidth': '280',
        'minSlides': 2,
        'maxSlides': 4,
        'moveSlides': 1,
        'speed': 600,
        //	    'slideMargin': 20
    })





</script>

</html>
